<!-- FooterBar -->
<template>
  <div class="FooterBar">
    <div class="footerBox">
      <div class="footerNmaeBox">
        <div>
          <ul class="consulting1">
            <li class="h2">动态资讯</li>
            <li>
              <router-link
                :to="{
                  path: '/p_dinfor',
                  query: { id: 1, random: Math.random() },
                }"
                >企业新闻</router-link
              >
            </li>
            <li>
              <router-link
                :to="{
                  path: '/p_dinfor',
                  query: { id: 2, random: Math.random() },
                }"
                >行业资讯</router-link
              >
            </li>
            <li>
              <router-link
                :to="{
                  path: '/p_dinfor',
                  query: { id: 3, random: Math.random() },
                }"
                >成功案例</router-link
              >
            </li>
          </ul>
        </div>
        <div>
          <ul class="consulting1">
            <li class="h2">平台服务</li>
            <li>
              <router-link
                :to="{ path: '/p_Jst', query: { random: Math.random() } }"
                >机施通</router-link
              >
            </li>
            <li>
              <router-link
                :to="{ path: '/p_eye', query: { random: Math.random() } }"
                >机械天眼</router-link
              >
            </li>
            <li>
              <router-link
                :to="{ path: '/p_hst', query: { random: Math.random() } }"
                >财税通</router-link
              >
            </li>
          </ul>
        </div>
        <div>
          <ul class="consulting1">
            <li class="h2">关于我们</li>
            <li>
              <keep-alive>
                <div @click="flushCom">企业简介</div>
              </keep-alive>
            </li>
            <li>
              <router-link
                :to="{ path: '/p_cpf', query: { mid: -1,random: Math.random()}}"
                >发展历史</router-link
              >
            </li>
            <li>
              <router-link
                :to="{ path: '/p_ctu', query: { random: Math.random() } }"
                >联系我们</router-link
              >
            </li>
          </ul>
        </div>
      </div>
      <div class="timePhoneBox">
        <div class="timeBox">
          <img src="./../assets/img/footerbar/timeIcon.png" class="timeIcon" />
          <span>工作日：9:00-18:30</span>
        </div>
        <div class="phoneBox">
          <img src="./../assets/img/footerbar/phoneIcon.png" class="timeIcon" />
          <span>4008-188-191</span>
        </div>
        <div class="codeBox">
          <div class="appBox">
            <img src="./../assets/img/footerbar/app.png" class="app" />
            <div class="styleColor">下载app</div>
          </div>
          <div class="vxBox">
            <img src="./../assets/img/footerbar/vx.png" class="vx" />
            <div class="styleColor1">关注公众号</div>
          </div>
        </div>
      </div>
    </div>
    <div class="footerHeightBox">
      <div class="heightStyle"></div>
      <div class="footerName">
        <div>
          Copyright © 2015-2021 轰隆隆honglonglong. All Rights Reserved.
        </div>
        <div>京ICP备20002211号</div>
      </div>
    </div>
  </div>
</template>

<script >
export default {
  // import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    // 这里存放数据
    return { mid: 0 };
  },
  // 过滤器
  filters: {},
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  props: ["aindex"],
  watch: {
    aindex(newValue) {
      console.log("this.aindex");
      console.log(this.aindex);
      this.aindex = this.aindex;
    },
  },
  // 方法集合
  methods: {
    flushCom: function () {
      //router是路由实例,例如:var router = new Router({})
      //router.go(n)是路由的一个方法，意思是在history记录中前进或者后退多少步，0就表示还是当前，类似window.history.go(n)
      // this.$router.go(1);
      if (this.aindex) {
        console.log(this.aindex);
        this.mid = Number(this.aindex) + 1;
        this.$router.push({ path: "/p_cpf", query: { mid: this.mid } });
      } else {
        this.$router.push({ path: "/p_cpf" });
      }

      console.log(this.mid);
    },
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  ctivated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发
};
</script>

<style lang='scss' scoped>
.FooterBar {
  // display: flex;
  // justify-items: fl;
  width: 100%;
  height: 336px;
  background: #1c1e2b;
}
li .router-link-active {
  color: #ff855b;
}
.consulting {
  color: #fff;
  font-size: 16px;
  // margin-right: 200px;
  .h2 {
    margin-bottom: 15px;
  }
  li {
    margin-top: 11px;
    font-size: 14px;
    cursor: pointer;
    a {
      color: #fff;
    }
  }
}
.consulting1 {
  font-size: 16px;
  // margin-right: 200px;
  .h2 {
    margin-bottom: 15px;
    color: #fff;
  }
  li {
    margin-top: 11px;
    font-size: 14px;
    color: #999;
    cursor: pointer;
    a {
      color: #999;
    }
  }
}
.footerBox {
  display: flex;
  justify-content: space-between;
}
.footerNmaeBox {
  width: 20%;
  display: flex;
  justify-content: space-between;
  margin-left: 10%;
  padding-top: 36px;
}
.timePhoneBox {
  display: flex;
  flex-direction: column;
  margin-top: 36px;
  margin-right: 230px;
}
.timeIcon {
  width: 22px;
  height: 22px;
}
.timeBox {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #ff855b;
  span {
    margin-left: 8px;
  }
}
.phoneBox {
  display: flex;
  align-items: center;
  font-size: 22px;
  color: #ff855b;
  margin-top: 7px;
  span {
    margin-left: 8px;
  }
}
.codeBox {
  display: flex;
  align-items: center;
  margin-top: 27px;
}
.app {
  width: 96px;
  height: 96px;
}
.vx {
  margin-left: 20px;
  width: 96px;
  height: 96px;
}
.styleColor {
  font-size: 14px;
  color: #fff;
  text-align: center;
  margin-left: 5px;
  margin-top: 8px;
}
.styleColor1 {
  font-size: 14px;
  color: #fff;
  text-align: center;
  margin-left: 20px;
  margin-top: 8px;
}
.footerHeightBox {
  margin-top: 20px;
  padding-left: 130px;
  padding-right: 130px;
}
.heightStyle {
  width: 100%;
  height: 1px;
  background: #606266;
}
.footerName {
  margin-top: 15px;
  font-size: 14px;
  color: #909399;
  text-align: center;
}
</style>
